<template>
  <div class="index">
    <Header></Header>
    <Search :isNavFixedShow="isNavFixedShow"></Search>
    <Banner></Banner>
    <Advert></Advert>
    <List v-for="(item, index) in list" ref="list" :listApi="item" :key="index"></List>
    <Footer></Footer>
    <Catalogue v-show="isCatalogue" @toCatalogueList="toCatalogueList"></Catalogue>
    <Aside @toCatalogueList="toCatalogueList"></Aside>
  </div>
</template>

<script>
// @ is an alias to /src
import Header from '@/components/Header.vue'// 头部导航
import Search from '@/components/Search.vue'// 搜索部分
import Banner from '@/components/Banner.vue'// 轮播图
import Advert from '@/components/Advert.vue'// 注意
import List from '@/components/List.vue'// 注意
import Footer from '@/components/Footer.vue'// 底部
import Catalogue from '@/components/Catalogue.vue'// 目录
import Aside from '@/components/Aside.vue'// 侧边栏


export default {
  name: 'Index',
  data() {
    return {
      isNavFixedShow: false,// 顶部fixed
      isCatalogue: false,// 目录fixed
      scrollCurrent: 0,
      list: [
        {
          title: "今日上新",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/shangxin/shangxin_1.png"),
              isDiscount: false,// 卷
              title: "日本代购champion冠军加绒卫衣女加厚慵懒风中长款字母外套ins潮",
              linePrice: 200,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_2.png"),
              isDiscount: false,// 卷
              title: "恒源祥羊毛衫2021年秋冬新款半高领羊绒毛衣女短款针织打底衫上衣",
              linePrice: 600,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_3.png"),
              isDiscount: false,// 卷
              title: "国潮美式高级感卫衣女2021年新款oversize设计感小众加绒加厚外套",
              linePrice: 20,
              number: 80,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_4.png"),
              isDiscount: false,// 卷
              title: "德绒高领打底衫女秋冬内搭黑色春秋百搭2021年新款洋气t恤女上衣",
              linePrice: 20,
              number: 120,
              isFirst: false
            },{
              src: require("../assets/icon/shangxin/shangxin_5.png"),
              isDiscount: false,// 卷
              title: "2021秋冬新款套头方领修身收腰长袖针织衬衫女气质百搭打底衫上衣\n",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        },
        {
          title: "拼团开奖",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/pintuan/pintuan_0.png"),
              isDiscount: false,// 卷
              title: "中大童小蜜蜂运动时尚套装女童2021秋季短款卫衣+休闲卫裤两件套",
              linePrice: 20,
              number: 60,
              isFirst: true
            },{
              src: require("../assets/icon/pintuan/pintuan_1.jpg"),
              isDiscount: false,// 卷
              title: "西裤女高腰垂感夏季薄款直筒宽松裤子ins潮显瘦百搭冰丝休闲裤bf",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_2.jpg"),
              isDiscount: false,// 卷
              title: "打底裤女裤子外穿高腰小脚新款黑色紧身秋冬季加厚加绒铅笔小黑裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_3.jpg"),
              isDiscount: false,// 卷
              title: "打底裤袜女秋冬外穿加厚加绒光腿裸感神器肉色黑色保暖裤秋裤棉裤",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_4.jpg"),
              isDiscount: false,// 卷
              title: "浪莎打底裤女外穿春秋薄款黑色加绒保暖裤肉色光腿裸感神器棉裤袜",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_5.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "卷",
              title: "完美限定日记小细管皮箱口红女大牌正品彩妆礼物化妆品全套装礼盒",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_6.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "卷",
              title: "欧莱雅黑管唇膏彩妆纷泽唇膏新年红小妖金豆沙色哑光口红",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_7.jpg"),
              isDiscount: false,// 卷
              title: "故宫淘宝彩妆故宫的雪浮雕口红宫猫限定新款哑光滋润生日圣诞礼物",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/pintuan/pintuan_8.jpg"),
              isDiscount: false,// 卷
              title: "JudydoLL/橘朵丝滑细腻气玩趣七色组合盘眼影高光腮红彩妆",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        },
        {
          title: "服饰服装",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/fushi/fushi_0.png"),
              isDiscount: false,// 卷
              title: "",
              linePrice: 20,
              number: 60,
              isFirst: true
            },{
              src: require("../assets/icon/fushi/fushi_1.jpg"),
              isDiscount: false,// 卷
              title: "衬衫女设计感小众短款不规则短袖衬衣夏季法式别致薄款纯欲风上衣",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_2.jpg"),
              isDiscount: false,// 卷
              title: "衬衫女设计感小众宽松中长款长袖衬衣外套2021年秋季新款蓝色上衣",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_3.jpg"),
              isDiscount: false,// 卷
              title: "Xiaoxi/枭系 2021秋新款港风V领链条褶皱开衩喇叭修身针织上衣女",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_4.jpg"),
              isDiscount: false,// 卷
              title: "2021秋季渐变晕染大版宽松针织圆领上衣",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_5.jpg"),
              isDiscount: false,// 卷
              title: "yokidan早秋长袖宽松针织T恤女2021春新款韩版中长小众慵懒风上衣",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_6.jpg"),
              isDiscount: false,// 卷
              title: "圆领卫衣女春秋2020年秋季新款韩版宽松百搭薄款秋装休闲短款上衣",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_7.jpg"),
              isDiscount: false,// 卷
              title: "ADA MISS秋2021新款亲肤型幼马海毛慵懒风短袖套头宽松圆领毛衣女",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_8.jpg"),
              isDiscount: false,// 卷
              title: "修身显瘦百搭打底BM风短款针织开衫套头羊毛毛衣女秋冬季上衣外套",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/fushi/fushi_9.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "下单有奖",
              title: "2021夏季柒柒家新款下摆抽绳波点T恤女灯笼袖后排扣设计感上衣潮",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        },
        {
          title: "鞋子箱包",
          link: "javascript:void(0);",// 查看更多
          items: [
            {
              src: require("../assets/icon/xiezi/xiezi_0.png"),
              isDiscount: false,// 卷
              title: "正品Longchamp包  ",
              linePrice: 20,
              number: 60,
              isFirst: true
            },{
              src: require("../assets/icon/xiezi/xiezi_1.jpg"),
              isDiscount: false,// 卷
              title: "小白鞋女夏季透气小白女鞋秋季爆款2021新款女生百搭学生白鞋女款  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_2.jpg"),
              isDiscount: false,// 卷
              title: "森马老爹鞋女ins潮百搭2021夏季新款透气薄款厚底增高休闲运动鞋  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_3.jpg"),
              isDiscount: false,// 卷
              title: "一脚蹬懒人鞋女2021年夏季新款平底单鞋薄款百搭小香风休闲小白鞋  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_4.jpg"),
              isDiscount: false,// 卷
              title: "PUMA彪马官方正品 女子厚底休闲鞋 松糕鞋SMASH PLATFORM 373035  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_5.jpg"),
              isDiscount: false,// 卷
              title: "老爹鞋女2021春秋季百搭网面透气休闲运动鞋小白鞋韩版学生女鞋子  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_6.jpg"),
              isDiscount: false,// 卷
              title: "小蛮腰阿甘鞋女2021年夏季新款厚底运动休闲鞋百搭老爹鞋子ins潮  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_7.jpg"),
              isDiscount: false,// 卷
              title: "小白鞋女2021夏季新款厚底板鞋透气休闲运动女鞋网红百搭白色网鞋  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_8.jpg"),
              isDiscount: false,// 卷
              title: "春秋老爹女鞋2021年新款夏季透气ins潮百搭运动小白休闲秋季大码  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },{
              src: require("../assets/icon/xiezi/xiezi_9.jpg"),
              isDiscount: true,// 卷
              isDiscountName: "下单有奖",
              title: "鞋子女2021夏季秋新款休闲鞋百搭女鞋透气运动小白鞋平底运动板鞋  ",
              linePrice: 20,
              number: 60,
              isFirst: false
            },
          ]
        }
      ]
    }
  },
  methods: {
    toCatalogueList(index) {
      // console.log(_this.$refs["list"])
      // console.log(_this.$refs["list"][index].$el.offsetTop)
      let _this = this
      let scrollTop = index != this.list.length ? this.$refs["list"][index].$el.offsetTop : 0
      let timer = setInterval(() => {
        if (this.scrollCurrent <= scrollTop) {
          this.scrollCurrent += 20
          if (this.scrollCurrent >= scrollTop) clearInterval(timer)
          window.scrollTo(0, _this.scrollCurrent - 100)
        } else {
          this.scrollCurrent -= 20
          if (this.scrollCurrent <= scrollTop) clearInterval(timer)
          window.scrollTo(0, _this.scrollCurrent - 100)
        }
      })


      /*let _this = this
      index != this.list.length ? window.scrollTo(0,_this.$refs["list"][index].$el.offsetTop - 100)
      : window.scrollTo(0,0);*/
    }
  },
  mounted() {
    let _this = this
    window.addEventListener("scroll", function(event) {
      var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
      this.scrollCurrent = scrollTop
      if (scrollTop < 150) {
        _this.isNavFixedShow = false
      } else if (scrollTop >= 580) {
        _this.isCatalogue = true
      } else {
        _this.isCatalogue = false
        _this.isNavFixedShow = true
      }
    });
  },
  components: {
    Header,
    Search,
    Banner,
    Advert,
    List,
    Footer,
    Catalogue,
    Aside
  }
}
</script>
